<template>
  <div>
    <el-card>
      <div>
        <el-table style="width: 100%" border :data="list">
          <el-table-column
            type="index"
            label="序号"
            width="80px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="发帖人"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="content_post"
            label="内容"
            width="width"
            align="center"
          >
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.content_post" placement="top">
                <p class="showOverTooltip">{{ scope.row.content_post }}</p>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="url"
            label="帖子图片"
            width="width"
            align="center"
          >
            <template slot-scope="{ row, $index }">
              <img :src="row.url" style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
          <el-table-column
            prop="content_time"
            label="发布时间"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="prop"
            label="操作"
            width="width"
            align="center"
          >
            <template slot-scope="{ row, $index }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteForum(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Forum",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getPageList();
  },
  methods: {
    async getPageList() {
      let result = await this.$API.forum.getForumList();
      if (result.code == 200) {
        this.list = result.data;
      }
    },
    deleteForum(row) {
      this.$confirm(`你确定删除${row.username}的帖子吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let result = await this.$API.forum.deleteForum({
            content_id: row.id,
          });
          if (result.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getPageList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
/* 只显示三行 */
.showOverTooltip {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  /*这里是3行*/
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
